<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {margin: 0; padding: 0; border: none}
			ul, li{list-style: none;}
			#box {
				width: 220px;
				height: 350px;
				background: #ccc;
			}
			ul {
				overflow: hidden;
			}
			li {
				float: left;
				width: 58px;
				height: 53px;
				border: 1px solid #aaa;
				background: #444;
				color: white;
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				cursor: pointer;
			}
			
			#showInfo {
				width: 200px;
				height: 50px;
				background: #aaa;
				border: 1px solid white;
				margin: 10px;
			}
			
			.active{
				color: orange;
				background: white;
				border: 1px solid red;
			}
			
		</style>
		<script src="js/jquery-1.12.3.js"></script>
		<script>
			
			$(function(){
				
				$("li").click(function(){
					
					//this.className = "active";
					$(this).addClass("active").siblings().removeClass("active");
					
					$("#showInfo").html( $(this).find("h2").html() + "月份好" );
				})
				
			})
			
		</script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li class="active">
					<h2>1</h2>
					<p>Jan</p>
				</li>
				<li>
					<h2>2</h2>
					<p>Feb</p>
				</li>
				<li>
					<h2>3</h2>
					<p>Mar</p>
				</li>
				<li>
					<h2>4</h2>
					<p>Apr</p>
				</li>
				<li>
					<h2>5</h2>
					<p>May</p>
				</li>
				<li>
					<h2>6</h2>
					<p>Jun</p>
				</li>
				<li>
					<h2>7</h2>
					<p>Jul</p>
				</li>
				<li>
					<h2>8</h2>
					<p>Aug</p>
				</li>
				<li>
					<h2>9</h2>
					<p>Sep</p>
				</li>
				<li>
					<h2>10</h2>
					<p>Oct</p>
				</li>
				<li>
					<h2>11</h2>
					<p>Nov</p>
				</li>
				<li>
					<h2>12</h2>
					<p>Dec</p>
				</li>
			</ul>
			<div id="showInfo">1月份好</div>
		</div>
	</body>
</html>
